Skip to main content

가상 클래스 선택자

동적 가상 클래스​

  • 아직 방문하지 않은 상태
a:link {
  color: blue;
}

:visited​

  • 이미 방문한 상태
a:visited {
  color: black;
}

:hover​

  • 마우스가 올라와 있을 때
p:hover {
  color: red;
}

:active​

  • 마우스를 클릭을 하고 있을 때
p:active {
  color: blue;
}

:focus​

현재 커서가 활성화되어 있을 때

input:focus {
  border: 2px solid black;
}

구조적 가상 선택자​

:first-child​

  • 상위 태그 안에서 첫 번째 태그
li:first-child {
  color: blue;
}

:last-child​

  • 상위 태그 안에서 마지막 태그
li:last-child {
  color: blue;
}

:nth-child(n)​

  • 상위 태그 안에서 해당하는 순서의 태그
/* 2번째 요소 */
li:nth-child(2) {
  color: blue;
}

/* 홀수 번째 */
li:nth-child(odd) {
  color: blue;
}

/* 짝수 번째 */
li:nth-child(even) {
  color: blue;
}

/* 2n+1 번째 */
li:nth-child(2n + 1) {
  color: blue;
}

:nth-of-type(n)​

  • 상위 태그 안에서 해당하는 태그의 n번째 요소
<style>
  p:nth-of-type(2) {
    color: blue;
  }
</style>

<body>
  <div>
    <h1>Hello World</h1>
    <p>Hello</p>
    <p>World</p>
    <!-- p 태그의 2번째 요소 -->
  </div>
</body>

:only-of-type​

  • 상위 태그 안에서 같은 유형의 태그가 없을 때
<style>
  p:only-of-type {
    color: blue;
  }
</style>

<body>
  <div>
    <!-- 미적용 -->
    <p>Hello</p>
    <p>World</p>
  </div>
  <div>
    <!-- 적용 -->
    <p>Hello World</p>
  </div>
</body>

:not(n)​

  • 부정 선택자
  • 상위 태그 안에서 n번째 외의 태그
p:not(1) {
  color: blue;
}

:root​

  • HTML 내의 전역 루트
:root {
  background-color: orange;
}